@auto: 0 auto;

  .pxToVW (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .OnePiece {
    overflow: hidden;
    width: 100vw;
  }

  .top_title {
    width: 100vw;
    height: 130vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .ranking {
    .pxToVW(770);
    margin: @auto;
    .pxToVW(20, margin-bottom);
    .pxToVW(20, padding-bottom);
    border: 1px solid #FFE063;
    position: relative;
    border-radius: 0 0 6px 6px;


    .left_diamond {
      position: absolute;
      left: -8px;
      top: -10px;
      .pxToVW(34);
      .pxToVW(34, height);
      z-index: 10;

      img {
        width: 100%;
      }
    }

    .right_diamond {
      position: absolute;
      right: -8px;
      top: -10px;
      .pxToVW(34);
      .pxToVW(34, height);
      z-index: 10;

      img {
        width: 100%;
      }
    }

    ._height50vh {
      height: 50vh
    }

    .center_content {
      .pxToVW(730);
      .pxToVW(30, border-radius);
      .pxToVW(30, margin-bottom);
      margin: @auto;
      border: 1px solid #FFE063;

      .back_bag1 {
        border: 2px solid;
        border-image: linear-gradient(45deg, #FFE99E, #F9B3FF) 5 5;
        clip-path: inset(0 round 4px);
        background: #FE6B5F;

      }

      .back_bag2 {
        background: #66048E;
        border: 2px solid;
        clip-path: inset(0 round 4px);
        border-image: linear-gradient(0deg, #9EF2FF, #EF00FE) 10 10;
      }

      .speedProgress {
        .pxToVW(700);
        .pxToVW(142, height);
        margin: @auto;
        .pxToVW(12, margin-top);
        .pxToVW(10, border-radius);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .top_cf {
          display: flex;
          .pxToVW(642);
          margin: @auto;
          justify-content: space-between;

          span:nth-of-type(1) {
            .pxToVW(34, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
          }

          span:nth-of-type(2) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
          }
        }

        .Progress {
          .pxToVW(642);
          .pxToVW(20, height);
          background: rgba(0, 0, 0, 0.4);
          margin: @auto;
          .pxToVW(10, border-radius);
          .pxToVW(30, margin-top);
          position: relative;

          >div {
            height: 100%;
            background: #F6CC03;
            border-radius: 5px 0px 0px 5px;
            position: absolute;
          }

          img {
            .pxToVW(68);
            .pxToVW(68, height);
            position: absolute;
            top: -110%;
          }
        }
      }

      .ba_active1 {
        .pxToVW(698);
        .pxToVW(224, height);
        margin: @auto;
        .pxToVW(31, margin-top);
        background: url('https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_chang_bg.png') no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .top_changshu {
          .pxToVW(150);
          .pxToVW(42, height);
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            position: absolute;
            width: 100%;
          }

          span {
            .pxToVW(24, font-size);
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFEFE;
            z-index: 10;
          }
        }

        .center_name {
          width: 94%;
          .pxToVW(118, height);
          margin: @auto;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .pic_avac {
            display: flex;
            align-items: flex-end;

            .zuoji_header {
              .pxToVW(100);
              .pxToVW(100, height);
              display: flex;
              justify-content: center;
              border-radius: 50%;

              img {
                border-radius: 50%;
                width: 100%;
              }
            }

            .name_list {
              display: flex;
              flex-direction: column;
              justify-content: center;

              span {
                .pxToVW(32, font-size);
                .pxToVW(4, padding-top);
                .pxToVW(26, margin-left);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFEFE;
              }

              .pic_header_img {
                display: flex;
                .pxToVW(26, margin-left);
                // .pxToVW(6, margin-top);
                align-items: center;

                img:nth-of-type(1) {
                  .pxToVW(32);
                  .pxToVW(32, height);
                }

                img:nth-of-type(2) {
                  .pxToVW(65);
                  .pxToVW(14, margin-left);
                }
              }
            }
          }

          .icon_cin {
            .pxToVW(130);
            .pxToVW(130, height);
            margin-top: -6px;

            img {
              width: 100%;
            }
          }
        }

        .bottom_cfzhi {
          width: 100%;
          .pxToVW(66, height);
          display: flex;
          align-items: center;
          justify-content: center;
          background: #C27C22;
          border-radius: 0 0 4px 4px;

          span:nth-of-type(1) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFEFE;
          }

          span:nth-of-type(2) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFF603;
          }
        }

      }

      .ba_active2 {
        .pxToVW(698);
        .pxToVW(224, height);
        margin: @auto;
        .pxToVW(31, margin-top);
        background: url('https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_chang_bg.png') no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;


        .top_changshu {
          .pxToVW(150);
          .pxToVW(42, height);
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            position: absolute;
            width: 100%;
          }

          span {
            .pxToVW(24, font-size);
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFEFE;
            z-index: 10;
          }
        }

        .center_name {
          width: 94%;
          .pxToVW(118, height);
          margin: @auto;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .pic_avac {
            display: flex;
            align-items: flex-end;

            .zuoji_header {
              .pxToVW(100);
              .pxToVW(100, height);
              border-radius: 50%;
              display: flex;
              align-items: center;

              img {
                border-radius: 50%;
                width: 100%;
              }
            }

            .name_list {
              display: flex;
              flex-direction: column;
              justify-content: flex-end;

              span {
                .pxToVW(32, font-size);
                .pxToVW(26, margin-left);
                .pxToVW(4, padding-top);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFEFE;
              }

              .pic_header_img {
                display: flex;
                .pxToVW(26, margin-left);
                // .pxToVW(6, margin-top);
                align-items: center;

                img:nth-of-type(1) {
                  .pxToVW(32);
                  .pxToVW(32, height);
                }

                img:nth-of-type(2) {
                  .pxToVW(60);
                  .pxToVW(14, margin-left);
                }
              }
            }
          }

          .icon_cin {
            .pxToVW(130);
            .pxToVW(130, height);
            margin-top: -6px;

            img {
              width: 100%;
            }
          }
        }

        .bottom_cfzhi {
          width: 100%;
          .pxToVW(66, height);
          display: flex;
          align-items: center;
          justify-content: center;
          background: #620E92;
          border-radius: 0 0 4px 4px;


          span:nth-of-type(1) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFEFE;
          }

          span:nth-of-type(2) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFF603;
          }
        }

      }

      .nopress {
        .pxToVW(30, font-size);
        height: 50vh;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFEFE;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 20vw;
      }

      .ba_active1:last-child {
        .pxToVW(40, margin-bottom);
      }

      .ba_active2:last-child {
        .pxToVW(40, margin-bottom);
      }
    }

    .rank_pangming {
      width: 92%;
      .pxToVW(160, height);
      margin: @auto;
      display: flex;
      align-items: center;
      position: relative;

      .rank_name {
        .pxToVW(54);
        .pxToVW(54, height);
        .pxToVW(30, margin-right);
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          .pxToVW(54);
        }

        span {
          // .pxToVW(30, margin-right);
          .pxToVW(40, font-size);
          font-family: PingFang SC;
          font-weight: bold;
          color: #FFFEFE;
        }
      }

      .header_img {
        .pxToVW(100);
        .pxToVW(100, height);
        background: #FFF609;
        border: 1px solid #FFFFFF;
        border-radius: 50%;

        img {
          width: 100%;
          border-radius: 50%;
        }
      }

      .border_back2 {
        border: 1px solid #00F4FD;
      }

      .border_back3 {
        border: 1px solid #FE81C4;
      }

      .user_miaoshu {
        display: flex;
        flex-direction: column;
        .pxToVW(26, margin-left);


        span {
          .pxToVW(32, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }

        >div {
          display: flex;
          align-items: center;
          .pxToVW(10, margin-top);

          img:nth-of-type(1) {
            .pxToVW(32);
            .pxToVW(32, height);
          }

          img:nth-of-type(2) {
            .pxToVW(70);
            .pxToVW(14, margin-left);
          }
        }
      }

      .pang_rangk {
        position: absolute;
        right: 0%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        .pxToVW(200);

        span {
          .pxToVW(32, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }

        >div {
          .pxToVW(95);
          .pxToVW(50, height);
          .pxToVW(20, margin-top);
          background: #FD5882;
          .pxToVW(25, border-radius);
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            .pxToVW(38);
            .pxToVW(26, height);
          }
        }

      }
    }

    .rank_pangming:last-child {
      .pxToVW(160, margin-bottom);
    }
  }

  .top_one {
    background: url("https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_bg.png") no-repeat;
    background-size: cover;
  }

  .top_two {
    background: url("https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_bg.png") no-repeat;
    background-size: cover;
  }

  .shine_icon {
    position: absolute;
    top: 6vw;
    .pxToVW(824);
    .pxToVW(238.4, height);
    display: flex;
    justify-content: center;
    z-index: 11;

    img {
      .pxToVW(690);
      .pxToVW(238.4, height);
      margin-left: 4vw;
    }
  }

  .stage_icon {
    display: flex;
    justify-content: center;
    .pxToVW(828);
    .pxToVW(716.6, height);
    flex-direction: column;
    align-items: center;
    margin-top: -12vw;
    position: relative;

    .back_stage {
      position: absolute;
      width: 100%;
    }

    .back_icon {
      position: absolute;
      top: 12vw;
      left: 0%;
      .pxToVW(92);
      .pxToVW(62, height);
      z-index: 13;
    }

    .SayHello {
      position: absolute;
      top: 10vw;
      .pxToVW(18, right);
      .pxToVW(60);
      z-index: 13;
    }

    .header_pic {
      .pxToVW(350);
      .pxToVW(350, height);
      .pxToVW(64, margin-top);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .portrait_kuang {
        // .pxToVW(350);
        width: 100%;
        position: absolute;
        z-index: 1;
      }

      .headPic_ {
        position: absolute;
        .pxToVW(258);
        .pxToVW(242, height);
        .pxToVW(30, bottom);
        border-radius: 50%;
      }

      .headPic_2 {
        .pxToVW(232);
        .pxToVW(232, height);
        position: absolute;
        .pxToVW(40, bottom);
        background: #5C2810;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          .pxToVW(88);
        }
      }

      .follow_icon {
        position: absolute;
        right: -18vw;
        bottom: 10vw;
        .pxToVW(125);
        .pxToVW(62, height);
        .pxToVW(62, border-radius);
        background: #FD5882;
        display: flex;
        justify-content: center;
        align-items: center;

        .pxToVW(34, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
      }
    }

    .EnterRoom {
      .pxToVW(222);
      .pxToVW(58, height);
      .pxToVW(30, border-radius);
      background: linear-gradient(270deg, #FD5882 1%, #FF9DF1 100%);
      z-index: 1;
      position: absolute;
      bottom: 9vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .pxToVW(30, font-size);
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #FFFFFF;

      >span {
        margin-left: 2px;
      }

      img {
        .pxToVW(38);
        .pxToVW(26, height);
      }
    }

    .user_list {
      width: 100vw;
      .pxToVW(70, height);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0vw;
      .pxToVW(36, font-size);
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #FFFFFF;

      .sex_iocn {
        .pxToVW(32, height);
        margin: 0 4px;
      }

      .dengji_iocn {
        .pxToVW(80);
      }
    }
  }

  .tab_cur {
    .pxToVW(828);
    .pxToVW(110, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_title_frame.png") no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    >div {
      .pxToVW(314);
      .pxToVW(80, height);
      .pxToVW(40, margin-left);
      .pxToVW(40, margin-right);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        width: 100%;
      }

      span {
        position: absolute;
        z-index: 1;
        .pxToVW(40, font-size);
        font-family: Adobe Heiti Std;
        font-weight: bold;
        color: rgba(254, 254, 254, 0.7);
      }

      .span_tab {
        .pxToVW(46, font-size);
        font-family: Adobe Heiti Std;
        font-weight: bold;
        color: #692E07;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 1;
      }

    }
  }

  .countDown {
    .pxToVW(720);
    .pxToVW(165, height);
    position: absolute;
    bottom: -2px;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    .left_FieldNumber {
      position: absolute;
      left: 0%;
      .pxToVW(230);
      .pxToVW(102, height);
      display: flex;
      align-items: center;
      justify-content: center;



      img {
        position: absolute;
        width: 100%;
      }

      span {
        z-index: 10;
        .pxToVW(36, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: rgba(246, 204, 3, 0.45);
      }
    }

    .right_FieldNumber {
      position: absolute;
      right: 0%;
      .pxToVW(230);
      .pxToVW(102, height);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        width: 100%;
      }

      span {
        z-index: 10;
        .pxToVW(36, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: rgba(246, 204, 3, 0.45);
      }
    }

    .center_iocn_time {
      .pxToVW(388);
      .pxToVW(166, height);
      z-index: 10;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        width: 100%;
      }

      >span:nth-of-type(1) {
        margin-top: 10px;
        .pxToVW(24, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        z-index: 10;
      }

      >span:nth-of-type(2) {
        .pxToVW(50, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFF603;
        z-index: 10;
      }
    }
  }

  .rank_user_pm {
    .pxToVW(828);
    .pxToVW(166, height);
    // background: linear-gradient(0deg, #FF6749 1%, #FA738F 98%);
    border-radius: 10px 10px 0px 0px;
    position: fixed;
    bottom: 0%;

    .center_user {
      width: 90%;
      height: 100%;
      margin: @auto;
      display: flex;
      align-items: center;
      position: relative;

      .heade_pic {
        .pxToVW(118);
        .pxToVW(118, height);
        background: #FFF609;
        border: 1px solid #FFFFFF;
        border-radius: 50%;

        img {
          width: 100%;
          border-radius: 50%;
        }
      }

      .list_userlianx {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        .pxToVW(32, margin-left);

        span:nth-of-type(1) {
          .pxToVW(36, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }

        span:nth-of-type(2) {
          .pxToVW(28, padding-top);
          .pxToVW(32, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }
      }

      .pm_list {
        width: 20vw;
        height: 100%;
        position: absolute;
        right: 0%;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          .pxToVW(32, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }
      }
    }
  }

  .start-taste-line {
    width: 5vw;
    display: flex;
    justify-content: space-around;
  }





  .rule_model {
    width: 88vw;
    height: 120vw;
    background: #2A0A44;
    overflow-y: scroll;

    .top_title_rule {
      width: 88%;
      height: 14vw;
      display: flex;
      margin: @auto;
      align-items: center;
      .pxToVW(38, font-size);
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;

    }

    .rule_explain {
      width: 88%;
      margin: @auto;
      display: flex;
      flex-direction: column;
      justify-content: center;

      span {
        .pxToVW(30, font-size);
        .pxToVW(50, line-height);
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }

    .FortuneStar {
      width: 88%;
      height: 10vw;
      margin: @auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .pxToVW(28, margin-bottom);

      img {
        .pxToVW(126);
      }

      span {
        .pxToVW(32, font-size);
        font-family: PingFang SC;
        font-weight: 500;
        color: #FEFEFE;
        .pxToVW(13, padding-left);
        .pxToVW(13, padding-right);
      }
    }

    .wealth_gift {
      width: 96%;
      margin: @auto;
      // overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      >div {
        .pxToVW(200);
        .pxToVW(260, height);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .pxToVW(50, margin-bottom);

        .gift_box {
          .pxToVW(170);
          .pxToVW(170, height);
          background: url('https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli_frame.png') no-repeat;
          background-size: cover;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 68%;
            height: 68%;
          }
        }

        .gift_text {
          display: flex;
          flex-direction: column;
          align-items: center;

          span {
            .pxToVW(24, font-size);
            font-family: PingFang SC;
            font-weight: 500;
            color: #FEFEFE;
          }
        }
      }
    }
  }